import React, { useState, useEffect } from 'react';
import { Modal, Button, Table, Tag, Space } from 'antd';

export default function Alert(props) {
  const [alert, setAlert] = useState([]);
  useEffect(() => {
    setAlert(props.alert);
  }, []);
  const columns = [
    {
      title: '创建时间',
      dataIndex: 'name',
      key: 'name',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '详细描述',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '状态',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '警告处理',
      key: 'tags',
      dataIndex: 'tags',
      render: (tags) => (
        <>
          {tags.map((tag) => {
            let color = tag.length > 5 ? 'geekblue' : 'green';
            if (tag === 'loser') {
              color = 'volcano';
            }
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
  ];
  return (
    <>
      <Modal
        destroyOnClose={true}
        title="警告详情"
        centered
        visible={props.visibleAlert}
        onOk={() => props.closeAlert()}
        onCancel={() => props.closeAlert()}
        width={1200}
        cancelText="取消"
        okText="确认"
      >
        <Table columns={columns} dataSource={alert} />
      </Modal>
    </>
  );
}
